<template>
  <div v-loading="loading">
    <a-alert message="此配置用于上传微信三方模版" type="info" show-icon style="margin:10px 0 20px 15px;" />
    <div class="upload-wrap">
      <a-steps :current="step_current">
        <a-step title="扫描二维码登录" />
        <a-step title="上传成功" />
        <a-step title="添加到模版库" />
      </a-steps>
      <div class="uploadBox">
        <div class="getCode">
          <span v-if="!show_add_content">获取登录二维码</span>
          <a-button type="link" :loading="login_btn_loading" @click="getLoginQrcode" v-if="show_get_login_qrcode_btn">
            获取登录二维码
          </a-button>
          <!-- <a-button type="link" :loading="preview_btn_loading" @click="onUpload" v-if="login_qrcode">
            微信已扫描
          </a-button> -->
          <a-button type="link" :loading="upload_btn_loading" @click="onUpload" v-if="login_qrcode">
            微信已扫描
          </a-button>
          <a-button type="link" :loading="add_template_btn_loading" v-if="is_template">
            添加到模版库
          </a-button>
          <div class="wxdev-login-block" style="display: flex; flex-direction: column; align-items: center" v-if="login_qrcode">
            <img
              :src="login_qrcode"
              class="wxdev-tool-login-qrcode"
              style="height: 300px; width: 300px; margin: 10px auto"
            />
            <div>请使用小程序管理员或开发者微信扫码登录</div>
          </div>
          <div v-if="show_preview_content" style="display: block">
            <div class="wxdev-preview-block" style="display: flex; flex-direction: column; align-items: center">
              <img
                :src="preview_qrcode"
                class="wxdev-tool-preview-qrcode"
                style="height: 300px; width: 300px; margin: 10px"
              />
              <div>扫描二维码预览小程序</div>
            </div>
          </div>
          <div v-if="show_upload_content">
            <div class="mb-3">
              上传成功！
            </div>
            <br />
            <div class="mb-3">
              <div>
                版本号：<span class="upload-version">{{ upload_version }}</span>
              </div>
              <br />
              <div>
                描述：<span class="upload-desc">{{ upload_desc }}</span>
              </div>
            </div>
          </div>
          <div v-if="show_add_content">
            添加成功！
          </div>
          <div style="margin-top: 20px">
            <a-alert :message="tongzhi" banner type="warning" v-if="tongzhi" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { wechatTemplateUploadLogin, wechatTemplateUploadUpload, wechatTemplateUploadAdd } from '@/api/setting/allianceWechatUpload'

export default {
  name: 'WechatTemplateUpload',
  data () {
    return {
      btn_loading: false,
      login_btn_loading: false,
      preview_btn_loading: false,
      upload_btn_loading: false,
      modal_visible: false,
      qrcode: '',
      step_current: 0,
      login_qrcode: '',
      preview_qrcode: '',
      tongzhi: '',
      show_get_login_qrcode_btn: true,
      show_preview_content: false,
      show_upload_content: false,
      upload_version: '',
      upload_desc: '',
      add_template_btn_loading: false,
      is_template: false,
      show_add_content: false
    }
  },
  methods: {
    // 获取登录二维码
    getLoginQrcode: function () {
      this.is_template = false
      this.login_btn_loading = true
      this.tongzhi = ''
      wechatTemplateUploadLogin({})
        .then((res) => {
          if (res.code == 0) {
            this.login_qrcode = res.data.qrcode
            if (this.login_qrcode != '') {
              this.show_get_login_qrcode_btn = false
            } else {
              this.tongzhi = res.tongzhi
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch((error) => {
          console.log(error)
          this.login_btn_loading = true
          wechatTemplateUploadLogin({}).then(res => {
            if (res.code == 0) {
              this.login_qrcode = res.data.qrcode
              if (this.login_qrcode != '') {
                this.show_get_login_qrcode_btn = false
              } else {
                this.tongzhi = res.tongzhi
              }
            } else {
              this.$message.error(res.msg)
            }
          }).catch(error => {
            console.log(error)
            this.$message.error('请求出错，请重新点击按钮')
          }).then(() => {
            this.login_btn_loading = false
          })
        })
        .then(() => {
          this.login_btn_loading = false
        })
    },
    // 上传小程序
    onUpload: function () {
      this.is_template = false
      this.tongzhi = ''
      this.upload_btn_loading = true
      wechatTemplateUploadUpload({})
        .then((res) => {
          if (res.code == 0) {
            this.upload_version = res.data.version
            this.upload_desc = res.data.desc
            this.step_current = 1
            this.show_preview_content = false
            this.show_upload_content = true
            this.login_qrcode = ''
            this.addTemplate()
          }
        })
        .catch((error) => {
          console.log(error)
          this.upload_btn_loading = true
          wechatTemplateUploadUpload({}).then(res => {
            if (res.code == 0) {
              this.upload_version = res.data.version
              this.upload_desc = res.data.desc
              this.step_current = 1
              this.show_preview_content = false
              this.show_upload_content = true
              this.login_qrcode = ''
              this.addTemplate()
            }
          }).catch(error => {
            console.log(error)
            this.$message.error('请求出错，请重新点击按钮')
          }).then(() => {
            this.upload_btn_loading = false
          })
        })
        .then(() => {
          this.upload_btn_loading = false
        })
    },
    addTemplate: function () {
      this.upload_btn_loading = false
      this.is_template = true
      this.add_template_btn_loading = true
      wechatTemplateUploadAdd({}).then(res => {
        if (res.code == 0) {
          this.is_template = false
          this.show_upload_content = false
          this.step_current = 2
          this.show_add_content = true
        } else {
          this.$message.error(res.msg)
        }
      }).catch(error => {
        console.log(error)
        this.$message.error('请求出错，请重新点击按钮')
      }).then(() => {
        this.add_template_btn_loading = false
      })
    }
  },
}
</script>

<style scoped>
.label {
  position: relative;
  top: 1px;
}
.modal-qrcode {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-qrcode img {
  width: 300px;
  height: 300px;
  display: inline-block;
}
.upload-wrap {
  padding: 0 50px;
  margin-top: 40px;
}
.wxapp-body {
  padding: 50px;
  text-align: center;
}
.wxapp-body div {
  display: inline-block;
}
.uploadBox {
  width: 40%;
  margin: 20px auto;
  background-color: #f8f8f8;
  padding: 24px;
}
</style>
